<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import mapboxgl from 'mapbox-gl'

const props = defineProps<{
  map?: mapboxgl.Map
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const isEnabled = ref(false)
const coordinate = ref('')
let popupMarker: mapboxgl.Marker | null = null
let circleMarker: mapboxgl.Marker | null = null
let imgMarker: mapboxgl.Marker | null = null

const createMarker = (lngLat: [number, number], type: 'popup'|'circle'|'img'): mapboxgl.Marker => {
  const el = document.createElement('div')
  let anchor = 'left'
  let offset = [6, -20]
  switch(type){
   case 'popup':
    el.style.cssText = `
        padding: 5px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 5px; 
        border: 1px solid #1890ff;
        color: #1890ff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        font-size: 14px;
    `
    anchor = 'left'
    offset = [6, -20]
    break
   case 'circle':
    el.style.cssText = `
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #f0ad4e; 
    `;
    anchor = 'center'
    offset = [0, 0]
    break
   case 'img':
    el.className = 'img_marker'
    break
   default:
    break
  }
  return new mapboxgl.Marker({
    element: el,
    anchor: anchor,
    offset: offset
  }).setLngLat(lngLat).addTo(props.map!)
}

watch(isEnabled, (newVal) => {
  if (newVal && props.map) {
    if (!popupMarker) {
      popupMarker = createMarker([0, 0],'popup')
    }
    if (!circleMarker) {
      circleMarker = createMarker([0, 0],'circle')
    }
  } else if (!newVal && popupMarker) {
    popupMarker?.remove()
    popupMarker = null
  }
})

onMounted(() => {
  if (!props.map) return
  props.map.on('mousemove', (e) => {
    if (isEnabled.value && popupMarker) {
      const lngLat = [e.lngLat.lng, e.lngLat.lat]
      popupMarker.setLngLat(lngLat)
      popupMarker.getElement().innerHTML = `<div>${lngLat[0].toFixed(6)}, ${lngLat[1].toFixed(6)}</div>`
      
    }
  })

  props.map.on('click', (e) => {
    if (isEnabled.value) {
      coordinate.value = `${e.lngLat.lng.toFixed(6)},${e.lngLat.lat.toFixed(6)}`
      if (circleMarker) {
        circleMarker.setLngLat([e.lngLat.lng, e.lngLat.lat])
      }else{
        circleMarker = createMarker([e.lngLat.lng, e.lngLat.lat],'circle')
        circleMarker.setLngLat([e.lngLat.lng, e.lngLat.lat])
      }
    }
  })
})

const handleLocate = () => {
  if (!props.map || !coordinate.value) return
  const [lng, lat] = coordinate.value.split(',').map(Number)
  if (!isNaN(lng) && !isNaN(lat)) {
    props.map.flyTo({
      center: [lng, lat],
      zoom: 13,
      speed: 5,
      curve: 1,
      easing: (t) => t,
      essential: true
    })
  }
}

const handleClear = () => {
  coordinate.value = ''
  circleMarker?.remove()
  circleMarker = null
}
</script>

<template>
  <div class="coordinate-picker">
    <input type="checkbox" v-model="isEnabled" id="coordinate-toggle" />
    <label for="coordinate-toggle">坐标拾取器</label>
    <input 
      type="text" 
      v-model="coordinate" 
      placeholder="经度,纬度"
    />
    <button @click="handleLocate">定位</button>
    <button @click="handleClear">清除</button>
  </div>
</template>

<style scoped>
.coordinate-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
}

input[type="text"] {
  width: 150px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}


</style>
